<template>
    <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
    import echarts from 'echarts'

    require('echarts/theme/macarons') // echarts theme

    const animationDuration = 6000

    export default {
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '100%'
            },
            height: {
                type: String,
                default: '300px'
            },
            chartData: {
                type: Object,
                required: true
            },
            formatterFun: {
                type: Function,
                default: null
            }
        },
        data() {
            return {
                chart: null
            }
        },
        watch: {
            chartData: {
                deep: true,
                handler(val) {
                    this.setOptions(val)
                }
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.initChart()
            })
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose()
            this.chart = null
        },
        methods: {
            initChart() {
                this.chart = echarts.init(this.$el, 'macarons')
                this.setOptions(this.chartData)
            },
            setOptions({xData, yData} = {}) {
                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        },
                        // formatter: function(params) {//这里就是控制显示的样式
                        //     var relVal = params[0].name;
                        //     var value = 0;
                        //     for (var i = 0, l = params.length; i < l; i++) {
                        //         value += params[i].value;
                        //     }
                        //     for (var i = 0, l = params.length; i < l; i++) {
                        //         //marker 就是带颜色的小圆圈 seriesName x轴名称  value  y轴值 后面就是计算百分比
                        //         relVal += '<br/>'+ params[i].marker + params[i].seriesName + '  : '+ parseFloat(params[i].value) ;
                        //     }
                        //     relVal += '<br/>'+ params[1].marker + '回调占比  : '+ parseFloat(params[1].value/params[0].value*100).toFixed(2) + '%' ;
                        //     return relVal;
                        // }
                    },
                    grid: {
                        top: 10,
                        left: '2%',
                        right: '2%',
                        bottom: '10%',
                        containLabel: true
                    },
                    dataZoom : [
                        {
                            type: 'slider',
                            show: true,
                            start: 0,
                            end: 5,
                            xAxisIndex: [0],
                            bottom: -5 //距离底部的距离
                        },
                    ],
                    xAxis: [{
                        type: 'category',
                        data: xData,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisTick: {
                            show: false
                        }
                    }],
                    series: yData.map(item=>{
                        return {
                            name: item.name,
                            type: 'bar',
                            stack: 'vistors',
                            barWidth: '60%',
                            data: item.value,
                            animationDuration
                        }
                    })
                }
                if (this.formatterFun) {
                    option.tooltip.formatter = this.formatterFun
                }
                this.chart.setOption(option)
            }
        }
    }
</script>
